<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07个人简历练习</title>
</head>
<body>
<table border="1px">
    <caption>个人简介</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friends_td"></td>
    </tr>
</table>
<script>
    let person = {
        name:'传奇哥',
        age:18,
        friends:['小明','小红','小刚'],
        imgUrl:'img/fcq.jpg'
    };
    //根据id依次获取四个单元格元素
    let picTd = document.getElementById('pic_td');
    let nameTd = document.getElementById('name_td');
    let ageTd = document.getElementById('age_td');
    let friendsTd = document.getElementById('friends_td');
    //将对象的指定属性值装入单元格中
    nameTd.innerHTML = person.name;
    ageTd.innerHTML = person.age;
    //需要创建一个图片对象
    let imgE = document.createElement('img');
    imgE.src = person.imgUrl;
    imgE.width = 100;
    //注意:需要把图片元素放入对应的单元格中,不能用innerHTML!!!
    picTd.append(imgE);
    //页面没有无序列表,需要创建
    let ulE = document.createElement('ul');
    //遍历好友数组,有几位好友,ul中就有几个li
    for(let i=0;i<person.friends.length;i++){
        //遍历几次,就生成几个li
        let liE = document.createElement('li');
        //将本轮遍历到的好友名字放入li中
        liE.innerHTML = person.friends[i];
        //将li放入ul中
        ulE.append(liE);
    }
    //将ul放入好友单元格中
    friendsTd.append(ulE);
</script>
</body>
</html>